<template>
	<view class="changeInfo">
		<view class="nav-box">
			<view class="title">编辑个人资料</view>
			<navigator 
			open-type="switchTab" 
			url="/pages/personal/personal" 
			class="iconfont iconfanhui icon-nav" 
			></navigator>
		</view>
		<view class="box">
			<view class="img-box">
				<image 
				class="img" 
				:src="src"
				@click="chooseImg"
				></image>
				<view class="text">点击更换头像</view>
			</view>
		</view>
		<view class="info-box">
			<view open-type="redirect" class="text-box user_inp">
				<view>昵称</view>
				<view class="iconfont iconchangyongicon- icon-box"></view>
				<input type="text" style="text-align: right;" v-model="user.userName"></input>
			</view>
			<picker :range="company" :range-key="'label'" @change="bindCompanyChange">
				<view class="text-box">
					<view class="left">公司</view>
					<view class="iconfont iconchangyongicon- icon-box"></view>
					<view class="right">{{user.companyName}}</view>	
				</view>
			</picker>
			<picker :range="department" :range-key="'label'" @change="bindDepartmentChange">
				<view class="text-box">
					<view class="left">部门</view>
					<view class="iconfont iconchangyongicon- icon-box"></view>
					<view class="right">{{user.departmentName}}</view>	
				</view>
			</picker>
			<view open-type="redirect" class="text-box user_inp">
				<view>电话</view>
				<view class="iconfont iconchangyongicon- icon-box"></view>
				<input type="text" style="text-align: right;" v-model="user.tel"></input>
			</view>
		
		</view>
		<view>
			<button @click="Submit">完成编辑</button>
		</view>
	</view>
</template>
 
<script>
	import request from '../../utils/request.js'
	
	export default {
		data() {
			return {
				src:'',
				user:{
					userName:"",
					companyId: '', // 存储选中的公司ID
					companyName: '',
					departmentId: '', // 存储选中的部门ID
					departmentName: '请选择部门',
					tel:"",
				},
				company_info: {},
				department_info: {},
				company:[],
				department: [],
			}
		},
		methods: {
			async Submit() {
				// request.post('/wx/update', {
				// 		F0602: this.user.userName,
				// 		F0501: this.user.company
				// }).then(res => {
				// 	console.log(res.data);
				// })
				const parts = this.src.split('/'); // 使用'/'分割字符串
				console.log(parts[parts.length - 1]);
				await request.post('/wx/updateById', {
					f0501: this.user.departmentId,
					f0301: this.user.companyId,
					f0602: this.user.userName,
					f0604: this.user.tel,
					f0616: parts[parts.length - 1]
				}).then(res => {
					console.log(res.data);
				})
				uni.reLaunch({
				    url: '/pages/index/index'
				});
				uni.setStorage({
					key:'userName',
					data:this.user.userName,
					
				})
				uni.setStorage({
					key:'tel',
					data:this.user.tel
					
				})
			},
			chooseImg(){
				uni.chooseImage({
				    count: 1, // 最多可以选择的图片张数
				    sourceType: ['album'], // 从相册选择
				    sizeType: ['original', 'compressed'], // 可以选择原图或压缩图
				    success: (res) => {
				      // 获取到图片的临时文件路径
				      const tempFilePath = res.tempFilePaths[0];
				      // 上传图片
				      this.uploadImage(tempFilePath);
				    }
				  });
			},
			uploadImage(tempFilePath) {
			  var token = uni.getStorageSync("token");
			  uni.uploadFile({
			    url: 'http://localhost:8080/wx/uploadimage', // 服务器接收上传文件的接口地址
			    filePath: tempFilePath, // 要上传文件资源的路径
			    name: 'file', // 必填，后台用来解析文件的key
			    // formData: {
			    //   'user': 'test' // 其他额外的form data
			    // },
				header: {
					'Authorization': token
					},
			    success: (uploadFileRes) => {
			      // 上传成功的处理，比如更新头像显示等
				  let res = JSON.parse(uploadFileRes.data)
				  console.log(res.msg);
				  this.src = 'http://47.121.118.149:42410/browser/buck1/' + res.msg
				  console.log(this.src);
				  uni.redirectTo({
				      url: '/pages/name/name'
				  });
			    },
			    fail: (error) => {
			      // 上传失败的处理
			      console.error('上传失败:', error);
			    }
			  });
			},
			async bindCompanyChange(e){
               // 获取用户选择的公司对象
               const selectedCompany = this.company[e.detail.value];
               // 更新用户选中的公司ID和名称
               this.user.companyId = selectedCompany.value;
               this.user.companyName = selectedCompany.label;
               // 存储选中的公司信息
               uni.setStorage({
                 key: 'company',
                 data: {
                   id: selectedCompany.value,
                   name: selectedCompany.label
                 }
               });
               console.log('选中的公司ID:', this.user.companyId);
			   await request.get(`/wx/getDept/${this.user.companyId}`).then(res => {
			   	this.department_info = res.data.data
			   	this.department = this.department_info.map(item => {
			   	    return {
			   	      label: item.f0502, // 显示的名称
			   	      value: item.f0501 // 对应的id值
			   	    };
			   	});
			   	console.log(this.department);
			   })
             },
			bindDepartmentChange(e){
				// 获取用户选择的公司对象
				const selectedDepartment = this.department[e.detail.value];
				// 更新用户选中的公司ID和名称
				this.user.departmentId = selectedDepartment.value;
				this.user.departmentName = selectedDepartment.label;
				// 存储选中的公司信息
				uni.setStorage({
				  key: 'deparment',
				  data: {
				    id: selectedDepartment.value,
				    name: selectedDepartment.label
				  }
				});
				console.log('选中的部门ID:', this.user.departmentId);
			},
		},
		onLoad() {
			uni.getStorage({
				key:'userName',
				success: (res) => {
					this.user.userName=res.data
				}
			}),
			uni.getStorage({
				key:'company',
				success: (res) => {
					this.user.companyName = res.data.name
				}
			}),
			uni.getStorage({
				key:'department',
				success: (res) => {
					this.user.departmentName = res.data.name
				}
			}),
			uni.getStorage({
				key:'tel',
				success: (res) => {
					this.user.tel=res.data
				}
			})
		},
		async mounted(){
			await request.get('/wx/userinfo').then(res => {
				console.log(res.data);
				this.userinfo = res.data.data
				this.user.userName = res.data.data.f0602
				this.user.tel = res.data.data.f0604
				this.src = 'http://47.121.118.149:9000/buck1/' + res.data.data.f0616
			})
			await request.get('/wx/getCom').then(res => {
				this.company_info = res.data.data
				this.company = this.company_info.map(item => {
				    return {
				      label: item.f0302, // 显示的名称
				      value: item.f0301 // 对应的id值
				    };
				});
				console.log(this.company);
			})
		}
	}
</script>
 
<style>
.changeInfo{
	padding: 10px;
	width: 100%;
	height: 100%;
	background: #ffffff;
}
.nav-box{
	height: 50px;
	position: relative;
	margin: 0 auto;
	padding-top: 30px;
}
.title{
	text-align: center;
	color: #000000;
	font-size: 18px;
}
.icon-nav{
	position: absolute;
	top:30px;
	left: 10px;
	color: #000000;
}
.box{
	width: 100%;
	height: 150px;
	margin: 0 auto;
}
.img-box{
	text-align: center;
}
.img{
	margin-top: 20px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
}
.text{
	margin-top: 13px;
	color: #999999;
	font-size: 13px;
}
.info-box{
	padding:0 10px;
}
.text-box{
	width: 100%;
	height: 52px;
	line-height: 52px;
	
}
.user_inp {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.left{
	float: left;
	font-size: 15px;
	color: #000000;
}
.right{
	float: right;
	font-size: 15px;
	margin-right: 7px;
	color: #999999;
}
.icon-box{
	float: right;
	font-size: 15px;
	color:  #999999;
	width: 10px;
}
</style>